<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频管理 - 三石影视</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body class="bg-gray-100">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-lg">
        <div class="max-w-7xl mx-auto px-4">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <div class="flex-shrink-0 flex items-center">
                        <a href="{{ url_for('index') }}" class="text-2xl font-bold text-gray-800">三石影视</a>
                    </div>
                </div>
                <div class="flex items-center">
                    <div class="relative" id="userMenu">
                        <button id="userMenuBtn" class="flex items-center text-gray-700 hover:text-gray-900">
                            <i class="fas fa-user-circle text-2xl"></i>
                        </button>
                        <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1">
                            <a href="{{ url_for('profile') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                            <a href="{{ url_for('admin_dashboard') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">管理控制台</a>
                            <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- 页面标题和添加按钮 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-semibold text-gray-900">视频管理</h1>
            <a href="{{ url_for('admin_add_video') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                <i class="fas fa-plus mr-2"></i>
                添加视频
            </a>
        </div>

        <!-- 视频列表 -->
        <div class="bg-white shadow rounded-lg">
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">封面</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">标题</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">分类</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">浏览量</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">评分</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        {% for video in videos %}
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <img src="{{ video.cover }}" alt="{{ video.title }}" class="h-16 w-24 object-cover rounded">
                            </td>
                            <td class="px-6 py-4">
                                <div class="text-sm font-medium text-gray-900">{{ video.title }}</div>
                                <div class="text-sm text-gray-500">{{ video.description[:50] }}...</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ video.category }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ video.views }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">{{ video.rating }}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="{{ url_for('admin_edit_video', video_id=video.id) }}" class="text-indigo-600 hover:text-indigo-900 mr-4">
                                    <i class="fas fa-edit"></i>
                                    编辑
                                </a>
                                <button onclick="deleteVideo('{{ video.id }}')" class="text-red-600 hover:text-red-900">
                                    <i class="fas fa-trash"></i>
                                    删除
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 用户菜单显示控制
        const userMenuBtn = document.getElementById('userMenuBtn');
        const userDropdown = document.getElementById('userDropdown');

        if (userMenuBtn && userDropdown) {
            userMenuBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                userDropdown.classList.toggle('hidden');
            });
            
            // 点击其他地方关闭菜单
            document.addEventListener('click', (e) => {
                if (!userMenuBtn.contains(e.target) && !userDropdown.contains(e.target)) {
                    userDropdown.classList.add('hidden');
                }
            });
        }

        // 显示提示框
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            const toastMessage = document.getElementById('toast-message');
            if (!toast || !toastMessage) return;

            toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg transform translate-y-[-100%] opacity-0 transition-all duration-300 ${
                type === 'success' ? 'bg-green-600' : 'bg-red-600'
            } text-white`;
            
            toastMessage.textContent = message;
            toast.style.transform = 'translateY(0)';
            toast.style.opacity = '1';
            
            setTimeout(() => {
                toast.style.transform = 'translateY(-100%)';
                toast.style.opacity = '0';
            }, 3000);
        }

        // 删除视频
        async function deleteVideo(videoId) {
            if (!confirm('确定要删除这个视频吗？此操作不可恢复！')) return;

            try {
                const response = await fetch(`/admin/videos/delete/${videoId}`, {
                    method: 'POST',
                });
                const data = await response.json();
                
                if (response.ok) {
                    showToast('视频删除成功');
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    showToast(data.error || '删除视频失败', 'error');
                }
            } catch (error) {
                console.error('删除视频失败:', error);
                showToast('删除视频失败', 'error');
            }
        }

        // 图片上传预览
        const coverInput = document.getElementById('cover');
        const coverPreview = document.getElementById('cover-preview');
        
        if (coverInput && coverPreview) {
            coverInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        coverPreview.src = e.target.result;
                        coverPreview.classList.remove('hidden');
                    };
                    reader.readAsDataURL(file);
                }
            });
        }

        // 表单验证
        const addVideoForm = document.getElementById('addVideoForm');
        if (addVideoForm) {
            addVideoForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const title = document.getElementById('title').value.trim();
                const description = document.getElementById('description').value.trim();
                const cover = document.getElementById('cover').files[0];
                
                if (!title) {
                    showToast('请输入视频标题', 'error');
                    return;
                }
                
                if (!description) {
                    showToast('请输入视频描述', 'error');
                    return;
                }
                
                if (!cover) {
                    showToast('请选择视频封面', 'error');
                    return;
                }
                
                // 提交表单
                const formData = new FormData(this);
                fetch('/admin/videos/add', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast('视频添加成功');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        showToast(data.error || '添加视频失败', 'error');
                    }
                })
                .catch(error => {
                    console.error('添加视频失败:', error);
                    showToast('添加视频失败', 'error');
                });
            });
        }

        // 为所有按钮添加加载状态
        document.querySelectorAll('button').forEach(button => {
            button.addEventListener('click', function() {
                if (this.dataset.loading !== 'true') {
                    const originalText = this.innerHTML;
                    this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 处理中...';
                    this.dataset.loading = 'true';
                    this.disabled = true;

                    setTimeout(() => {
                        this.innerHTML = originalText;
                        this.dataset.loading = 'false';
                        this.disabled = false;
                    }, 2000);
                }
            });
        });
    });
    </script>
</body>
</html> 